<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>


<script>


    var canvas = d3.select("body")
                  .append("svg")
                  .attr("width",500)
                  .attr("height",500);



     var group = canvas.append("g")
                         .attr("transform","translate(200,300)");

     var r = 200
     var p = Math.PI * 2 ;
     var data = [10,50,80]
     var arc = d3.svg.arc()
                   .innerRadius(r-50)
                   .outerRadius(r);
     var color = d3.scale.ordinal()
                     .range(["yellow","red","orange"])

     var pie = d3.layout.pie()
                  .value(function(d)  {  return  d;})

     var arcs = group.selectAll(".arc")
                     .data(pie(data))
                     .enter()
                      .append("g")
                      .attr("class","arc");

     arcs.append("path")
           .attr("d",arc)
           .attr("fill", function(d) {return color(d.data)});
     arcs.append("text")
           .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"})
           .attr("font-size","1.5em")
           .attr("text-anchor","middle")
           .text(function(d) {return d.data});







</script>

</body>
</html>